<template>
  <div>
    <div class="left">
      <h1 class="title">广场热榜</h1>
      <div class="carousel">
        <carousel />
      </div>
      <div class="team">
        <team />
      </div>

    </div>
    <div class="right"> 
      
      <div><messageNotice /></div>
      <div>
        <myTeam/>
      </div>
      
    </div>
   

  </div>
</template>

<script>
import carousel from './components/carousel.vue'
import team from './components/team.vue'
import messageNotice from "./components/messageNotice.vue";
import myTeam from "./components/myTeam.vue";
export default {
  data () {
    return {
    }
  },
  props: {

  },
  components: {
    carousel,
    team,
    messageNotice,
    myTeam
  },
  mounted() {
  },
  mounted () {

  },
  methods: {

  }
}
</script>
<style scoped lang="less">
.title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 0px;
  color: rgba(10, 22, 41, 1);
  text-align: left;
  vertical-align: top;
  margin-bottom: 5vh;

}

.left {
  float: left;
  width: 60%;

  .team {
    margin-top: 5vh;
  }
}

.right {
  margin-left: 60%;
}
</style>
